<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 课堂作业： -->
    <ul>
        <li>
            <p>商品编号：102，名字：oppo</p>
            <p>价格：4999</p>
            <p>颜色：</p>
            <ul>
                <li>红色</li>
                <li>绿色</li>
                <li>玫瑰金</li>
            </ul>
        </li>
    </ul>

    <p>====================================================</p>

    <div id="goods">
        <ul>
            <li v-for="value in goodsList">
                商品编号：{{ value.gid }},名字：{{ value.title }}</br>
                价格：{{ value.price }}</br>
                颜色：
                <ul>
                    <li v-for="color in value.color">{{ color }}</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el : '#goods',
            // 作业的数据
            data : {
                goodsList : [{
                gid : 101,
                title : '华为',
                price : 5999,
                color : ['红色','绿色','玫瑰金']
            },{
                gid : 102,
                title : 'oppo',
                price : 4999,
                color : ['绿色','粉红色','玫瑰金','黄色']
            }]
        }    
    })
    
</script>
</html>